<template>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><img src="../assets/lunbo1.png" /></div>
			<div class="swiper-slide"><img src="../assets/lunbo2.jpg" /></div>
			<div class="swiper-slide"><img src="../assets/lunbo3.jpg" /></div>

		</div>
		<!-- 如果需要分页器 -->
		<div class="swiper-pagination"></div>
		<!-- 如果需要导航按钮 -->
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
		<!-- 如果需要滚动条 -->
		<!--<div class="swiper-scrollbar"></div>-->
	</div>
</template>

<script>
	import 'swiper/dist/css/swiper.min.css';
	export default {
		name: 'lunbo',
		mounted() {
			
				/* eslint-disable no-new */
				var a = new Swiper('.swiper-container', {
					//轮播方向 horizontal水平 vertical竖直的
					direction: 'horizontal',
					//是否无限轮播
					loop: true,
					//自动轮播
					autoplay: 5000,
					// 如果需要分页器
					pagination: '.swiper-pagination',

					// 如果需要前进后退按钮
					nextButton: '.swiper-button-next',
					prevButton: '.swiper-button-prev',
					paginationClickable: true,
				
			})

		}
	}
</script>

<style scoped>
	.swiper-container {
		cursor: pointer;
		width: 100%;
		height: 500px;
	}
	
	.swiper-button-prev {
		left: 80px;
		border: 6px solid orange;
		border-radius: 50%;
		width: 60px;
		height: 60px;
		background-color: orange;
		margin-top: -30px;
		opacity: 0.5;
	}
	
	.swiper-button-next {
		right: 80px;
		width: 60px;
		border: 6px solid orange;
		border-radius: 50%;
		background-color: orange;
		height: 60px;
		margin-top: -30px;
		opacity: 0.5;
	}
	
	.swiper-button-prev:hover {
		opacity: 0.8;
	}
	
	.swiper-button-next:hover {
		opacity: 0.8;
	}
</style>